<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>

    <script src="./js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id='app'>
        {{msg}}====
        <router-link to="/aa/3?name=jack">aa //声明式导航</router-link>  
        <router-link to="/bb">bb</router-link>
        <router-link to="/cc/22/tom/18">cc</router-link>
        <!-- <router-link to="/dd">Dd</router-link> -->
        <!-- <router-link :to="{name:'ddd',params:{gender:'男'},query:{name:'哈哈哈'}}">Dd</router-link> -->
        <router-link :to="{meta:'dddd',params:{gender:'男'},query:{name:'哈哈哈'}}">Dd</router-link>

        =======
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        var Aa = {
            props:['id','name'],
            template: `<div>
            我是aa===={{$route.params.id}}==={{$route.query.name}}==={{id}}=={{name}}
            </div>`
        }
        var Bb = {
            
            template: `<div>
            我是Bb
            <hr>
             <router-link to="/tab1">tab1</router-link>
             <router-link to="/tab2">tab2</router-link>

             =======
            <router-view></router-view>
            </div>`
        }
        var Cc = {
            template: `<div>
            我是Cc==={{$route.params.id}}=={{$route.params.name}}=={{$route.params.age}}
            </div>`
        }
        var Tab1 = {
            template: `<div>
            我是Tab1
            </div>`
        }
        var Tab2 = {
            template: `<div>
            我是Tab2
            </div>`
        }
        var Dd = {
            template: `<div>
            我是Dd==={{$route.params.gender}}=={{$route.query.name}}
            </div>`
        }
        const router = new VueRouter({
            routes: [
                { path: '/', redirect: '/bb' },
                // { path: '/aa/:id', component: Aa,props:{id:111,name:'Lucy'} },
                { path: '/aa/:id', component: Aa,props:route=>({id:111,name:route.params.id}) },
                {path: '/bb', component: Bb, children: [
                        { path: '/tab1', component: Tab1 },
                        { path: '/tab2', component: Tab2 },
                    ]
                },
                { path: '/cc/:id/:name/:age', component: Cc },
                { path: '/dd',name:'ddd',meta:'dddd', component: Dd },

            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router: router
        });
    </script>
</body>

</html>